<!-- /*
 * @Author: 谢力 843926058@qq.com
 * @Date:   2019-11-06
 * @Last Modified by:   谢力
 * @Last Modified time: 2019-11-07
 */ -->
<template>
    <div class="ui-mode-container ui-mode-box flex-col">
        <div class="ui-header-item gradient">
            <div class="ui-header-arraw prev" @touchstart.stop @click="handleHistory1">
                <i class="iconfont icon iconjiantou-zuo-cuxiantiao"></i>
            </div>
            <div class="ui-header-title">{{$route.query.serviceName}}</div>
        </div>
        <div class="ui-mode-content flex1 flex-col" ref="scroll" style="margin-bottom:2.4rem;">
            <div class="service-dialogue-wrap" v-if="pageStatus">
                <div class="service-dialogue-section"
                    :key="`chat-${item.id_public_user_info}-${i}`"
                    v-for="(item,i) in chat_list">
                    <div class="service-dialogue-time" :style="item.time_display">{{item.time_insert}}</div>
                    <div class="clearfix">
                        <div class="service-dialogue-img" :style="item.float" :class="[item.marginright]">
                            <!-- <img src="../../../../assets/images/detail_company_icon.png"> -->
                        </div>
                        <div :style="item.float">
                            <div class="service-dialogue-title" :class="item.background" :style="item.time_display">
                                <i class="mar-right-10" :style="item.title_display">{{item.chat_content_remark_010}}</i>
                            </div>
                            <div class="clearfix">
                                <div class="service-dialogue-content" :class="[item.background,item.margin]" :style="item.float">{{item.chat_content}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="chat-fasong flex-row align-center-row" v-if="pageStatus">
            <div class="ui-search flex-row align-between-row align-center-row">
                <div class="ui-search-wrap flex-row align-center">
                    <input type="text" placeholder="请输入消息" @focus="changeHeight(101)" @blur="changeHeight(102)" v-model="msg">
                </div>
                <button @touchstart.stop @click="fasong"></button>
            </div>
        </div>
	</div>
</template>
<script>
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
import {
	extend
} from '@/utils/tool';
export default {
    name: "my/chat/detail",
    data(){
        return {
            originalHeight:document.documentElement.clientHeight ||document.body.clientHeight,
            public_agent_info:{},
            public_user_info:{},
            chat_list:[],
            msg:'',
            bindId:'',
            int1: null  // 定时器名称
        };
    },
    mixins:[
        mixinCommon,
        mixinRequest,
    ],
    computed:{
    },
    watch:{
    },
    created(){
    },
    mounted(){
        this.init()
        window.onresize = ()=>{
            return(()=>{
                if (document.activeElement.tagName == 'INPUT') {
                    clearTimeout(that.heightTimer);  //清除延迟执行 
                    that.heightTimer = setTimeout(()=>{   //设置延迟执行
                        document.activeElement.scrollIntoView({
                            block: 'end',
                            behavior: 'smooth'
                        });
                    },500);                       
                }
            })()
        }
    },
    methods:{
        changeHeight(value){
            if(this.isAndroid){
                const originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
                clearTimeout(this.heightTimer1);  //清除延迟执行 
                this.heightTimer1 = setTimeout(()=>{   //设置延迟执行
                    if(value==101){
                        document.querySelector('body').setAttribute('style', 'height:'+(originalHeight/2)+'px;');
                    }else if(value==102){
                        document.querySelector('body').setAttribute('style', 'height:'+originalHeight+'px;');
                    }
                    this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight;
                },500);  
            } 
        },
        /*
         * 初始化
         */
        init(){
            this.getShopInfo().then(({result,response})=>{
                this.getPageInfo({
                    name:'my.chat.list',
                    param:{
                        invoke_method:'public_load_chat_list',
        				id_public_user_info:this.public_user_info.id_public_user_info,
                        id_target_user:this.$route.query.serviceId,
                        pre_db_para_begin_idx:0,
        				pre_db_para_length_4_list:1000
                    }
                }).then(({result,response})=>{
                    var list=result.page_content;
                    for(var i=0;i<list.length;i++){
                        list[i].time_display = 'display:none'
                        if(i > 1 || i === 1){
                            if(parseInt(list[i-1].type_content) !== parseInt(list[i].type_content)){
                                list[i].time_display = 'display:block';
                            } else {
                                if(this.dateDiff(list[i-1].time_insert,list[i].time_insert) > 1){
                                    list[i].time_display = 'display:block';
                                }
                            }
                        } else if(i===0){
                            list[i].time_display = 'display:block';
                        }
                        list[i].float=list[i].id_public_user_info===this.public_user_info.id_public_user_info?'float:right':'float:left';
                        list[i].marginright=list[i].id_public_user_info===this.public_user_info.id_public_user_info?'mar-left-16':'mar-right-16';
                        list[i].title_display=list[i].id_public_user_info===this.public_user_info.id_public_user_info?'display:none':'display:inline';
                        list[i].background=list[i].id_public_user_info===this.public_user_info.id_public_user_info?'service-dialogue-ask':'service-dialogue-reply';
                        list[i].margin=list[i+1]&&(parseInt(list[i].type_content) !== parseInt(list[i+1].type_content))?'mar-btm-20':'mar-btm-32';
                        list[i].time_insert=this.dateDiff(this.getDateInfo(new Date()),list[i].time_insert) > 24 ? list[i].time_insert:list[i].time_insert.split(' ')[1]
                    };
                    this.chat_list=list;
                    this.refreshReviewsList();
                });
            }).catch(({msg})=>{
                this.showResult(msg,true);
            });
        },
        getDateInfo(date){
			return [date.getFullYear(),this.formatDate(date.getMonth()+1),this.formatDate(date.getDate())].join('-')+String.fromCharCode(32)+[this.formatDate(date.getHours()),this.formatDate(date.getMinutes()),this.formatDate(date.getSeconds())].join(':');
		},
        formatDate:function(number){//格式化数字
			return number<10?'0'+number:number;
		},
		dateDiff(sDate1, sDate2){
        	var oDate1, oDate2;oDate1 = new Date(sDate1).getTime();//转换为MM-dd-yyyy格式 
        	oDate2 = new Date(sDate2).getTime();
        	var timeSpan = {};
        	var TotalMilliseconds = oDate1 - oDate2;
        	if (isNaN(TotalMilliseconds)  || TotalMilliseconds<0) {
				return null;
			}
        	timeSpan.TotalHours = parseInt(TotalMilliseconds / 1000 / 60 / 60);
        	return timeSpan;
        },
        /*
         * 获取门店信息
         */
        getShopInfo(){
            return new Promise((resolve,reject)=>{
                this.$http.post({
                    name:'common.shop.info',
                    data:{
                        invoke_method:'user_and_shop_info'
                    },
                    loading:{
                        enabled:false
                    }
                }).then(({result,response})=>{
                    this.public_agent_info=result.public_agent_info||{};
                    this.public_user_info=result.public_user_info||{};
                    this.public_goods_order_record=result.public_goods_order_record||{};
                    this.chat_obj = {
                        id_public_data_admin_user: result.public_user_info.id_public_data_admin_user,
                        id_public_user_info: result.public_user_info.id_public_user_info,
                        nick_name: result.public_user_info.nick_name,
                        phone_user: result.public_user_info.user_phone
                    }
                    this.middle_obj = {
                        id_public_data_admin_user: result.public_user_info.id_public_data_admin_user,
                        type_middle_app: 1111,
                        type_inner_app: 101,
                        is_online: 0,
                        id_public_user_info: result.public_user_info.id_public_user_info,
                        mid_table_remark_001: result.public_user_info.nick_name,
                        mid_table_remark_002: result.public_user_info.user_phone,
                    }
                    this.setState({
                        key:'public_agent_info',
                        value:this.public_agent_info
                    });
                    this.setState({
                        key:'public_user_info',
                        value:this.public_user_info
                    });
                    // this.$http.post({
                    //     name:'common.collect',
                    //     data:{
                    //         invoke_method:'public_load_middle_table_list',
                    //         pre_db_para_middle_table_name:'public_middle_table_1111',
                    //         type_middle_app:1111,
                    //         type_inner_app:101,
                    //         pre_db_para_begin_idx:0,
                    //         pre_db_para_length_4_list:1,
                    //         id_public_user_info:this.$route.query.serviceId,
                    //         id_public_user_info:result.public_user_info.id_public_user_info
                    //     },
                    //     loading:{
                    //         enabled:false
                    //     }
                    // }).then(({result,response})=>{
                    //     if(result.result_num>0){
                    //         this.bindId=result.page_content[0].id_public_middle_table;
                    //     }
                        resolve({result,response});
                    // })
                }).catch(({msg})=>{
                    reject({msg});
                });
            });
        },
        fasong(){
            var chat_item = this.chat_obj;
            if(!this.msg){
				this.showToast('不能发送空白信息',false);
				return false;
			}
            chat_item.chat_content=this.msg;
			chat_item.id_target_user=this.$route.query.serviceId;
			chat_item.type_content=201;
			chat_item.type_chat=2;
            this.$http.post({
                name:'my.chat.list',
                data:extend({
                    invoke_method:'public_insert_or_update_chat'
                },chat_item),
                loading:{
                    enabled:false
                }
            }).then(({result,response})=>{
                // if(this.bindId){
                //     this.middle_obj.pre_db_para_id_public_middle_table=this.bindId;
                // }
                // this.middle_obj.mid_table_remark_031='101';//客服未读
                // this.$http.post({
                //     name:'common.collect',
                //     data:extend(middle_obj,{
                //         invoke_method:'public_insert_or_update_middle_table',
                //         middle_table_name:'public_middle_table_1111'
                //     }),
                //     loading:{
                //         enabled:false
                //     }
                // }).then(({result,response})=>{
                    this.msg='';
                    this.getReviewsList();
                // })
            }).catch(({msg})=>{
            });
        },
        refreshReviewsList(){
			var that = this;
			this.int1 = setInterval( function() {
	            that.getReviewsList();
	        },7000);
            this.$once('hook:beforeDestroy', () => {            
                clearInterval(this.int1);
            })
		},
        getReviewsList(){
             this.$http.post({
                name:'my.chat.list',
                data:{
                    invoke_method:'public_load_chat_list',
                    id_public_user_info:this.public_user_info.id_public_user_info,
                    id_target_user:this.$route.query.serviceId,
                    pre_db_para_begin_idx:0,
        			pre_db_para_length_4_list:1000
                }
            }).then(({result,response})=>{
                var list=result.page_content;
                for(var i=0;i<list.length;i++){
                    list[i].time_display = 'display:none'
                    if(i > 1 || i === 1){
                        if(parseInt(list[i-1].type_content) !== parseInt(list[i].type_content)){
                            list[i].time_display = 'display:block';
                        } else {
                            if(this.dateDiff(list[i-1].time_insert,list[i].time_insert) > 1){
                                list[i].time_display = 'display:block';
                            }
                        }
                    } else if(i===0){
                        list[i].time_display = 'display:block';
                    }
                    list[i].float=list[i].id_public_user_info===this.public_user_info.id_public_user_info?'float:right':'float:left';
                    list[i].marginright=list[i].id_public_user_info===this.public_user_info.id_public_user_info?'mar-left-16':'mar-right-16';
                    list[i].title_display=list[i].id_public_user_info===this.public_user_info.id_public_user_info?'display:none':'display:inline';
                    list[i].background=list[i].id_public_user_info===this.public_user_info.id_public_user_info?'service-dialogue-ask':'service-dialogue-reply';
                    list[i].margin=list[i+1]&&(parseInt(list[i].type_content) !== parseInt(list[i+1].type_content))?'mar-btm-20':'mar-btm-32';
                    list[i].time_insert=this.dateDiff(this.getDateInfo(new Date()),list[i].time_insert) > 24 ? list[i].time_insert:list[i].time_insert.split(' ')[1]
                };
                this.chat_list=list;
                // var update_status={
                //     type_middle_app:1111,
                //     type_inner_app:101,
                //     is_online:0,
                //     pre_db_para_id_public_middle_table:this.bindId,
                //     mid_table_remark_030:'102',//用户已读
                // }
                // if(this.bindId){
				// 	this.$http.post({
                //         name:'common.collect',
                //         data:extend(update_status,{
                //             invoke_method:'public_insert_or_update_middle_table',
                //             middle_table_name:'public_middle_table_1111'
                //         }),
                //         loading:{
                //             enabled:false
                //         }
                //     }).then(({result,response})=>{
                //         this.bindId=result.page_content.id_public_middle_table;
                //     })
				// }
            }).catch(({msg})=>{
            });
        },
        stopReviewsList:function(){
			clearInterval(this.int1);
            this.int1 = null;
		},
        handleHistory1(){
            clearInterval(this.int1);
            this.int1 = null;
            this.$router.go(-1);
        }
    },
    components:{
    },
    beforeDestroy(){
        window.onresize = null;
        clearInterval(this.int1);
        this.int1 = null;
    }
}
</script>
<style lang="less" scoped>
.focusState {position: absolute;}
img.app-image[lazy=loaded].auto {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}
.ui-mode-content{
    padding-top:.4rem;
}
.bgwhite{
    background-color:#fff;
}
.service-dialogue-wrap{
    padding:0 .64rem;
}
.service-dialogue-time{
    margin-bottom:.85rem;
    font-size:.58rem;
    color:#878787;
    line-height:1.2em;
    text-align:center;
}
.service-dialogue-img{
    width:1.81rem;
    height:1.81rem;
    img{
        display:block;
        width:100%;
        height:100%;
    }
}
.service-dialogue-content{
    padding:.32rem .64rem;
    font-size:.69rem;
    border-radius:.21rem;
    line-height:1.2rem;
    max-width:12.13rem;
    word-wrap:break-word;
}
.clearfix:after{
    content:"1";
    display:block;
    height:0px;
    clear:both;
    visibility:hidden;
}
.service-dialogue-title{
    margin-bottom:.43rem;
    font-size:.58rem;
    color:#666;
    line-height:1.2em;
}
.service-dialogue-reply.service-dialogue-content{
    background-color:#fff;
}
.service-dialogue-ask.service-dialogue-title{
    text-align: right;
}
.service-dialogue-ask.service-dialogue-content{
    background-color:#319BFF;
    color: #fff;
}
.mar-btm-20{
    margin-bottom:.53rem;
}
.mar-btm-32{
    margin-bottom:.85rem;
}
.mar-left-16{
    margin-left:.43rem;
}
.mar-right-16{
    margin-right:.43rem;
}

.ui-search{
	box-sizing:border-box;
	width:80%;
	height:1.6rem;
	border:.05rem solid #F0A953;
	border-radius:.8rem;
	font-size:.69rem;
	background:#F2F2F2;
	.ui-search-wrap{
		width:70%;
		height:100%;
		padding:.4rem 0;
		em{
			display:block;
			width:1.7rem;
			height:100%;
			background-size:.75rem .75rem;
			background-position:center;
			background-repeat:no-repeat;
			background-image:url(~@/assets/images/common_search_icon.png);
		}
		input{
			display:block;
			width:80%;
			height:100%;
			border:none;
			font-size:.69rem;
			color:#aaa;
			background: #F2F2F2;
		}
		input::placeholder{
			color:#aaa;
		}
	}
	button{
		display:block;
		width:2.58rem;
		height:1.28rem;
		line-height:1.28rem;
		margin-right:.16rem;
		padding:0;
		border:none;
		font-size:.69rem;
		color:#fff;
		background: linear-gradient(45deg, #F38224 0%, #F0A953 100%);
		border-radius:.64rem;
	}
}
.chat-fasong{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:2.72rem;
    padding:.43rem .85rem;
    z-index:10;
    textarea{
        width:76%;
        height:100%;
        padding:.3rem;
        border:none;
        font-size:.64rem;
        border-radius:.94rem;
    }
    .ui-search{
        position: absolute;
        width:90%;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        border:.02rem solid #C9C9CB;
        background:#FFF;
        .ui-search-wrap{
            width: 80%;
        }
        .ui-search-wrap input{
            width: 90%;
            background:#FFF;
            line-height:1.2em;
        }
    }
    button{
        width:1.39rem;
        width:1.39rem;
        margin-right:.27rem;
        background-size:100%;
        background-position:center;
        background-repeat:no-repeat;
        background-image:url(~@/assets/images/common_send_icon.png);
    }
}
</style>